<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const editorRef = shallowRef();
const editorRef1 = shallowRef();

const valueHtml = ref(
  "<p>辖区内民用广播电视大功率发射塔XX座，各类卫星、短波、超短波电台站XX余个，各类电信运营商通信发射机站数量XX余个，电磁环境较复杂，军用电磁侦通器材品种多、用频广，相互之间也存在不同程度的干扰。战时，在敌广谱、强电磁干扰下，人防短波电台和超短波电台将在较复杂电磁环境下工作，需要充分发挥社会电磁资源优势，保证指挥通信畅通。</p>"
);
const valueHtml1 = ref(
  "<p>（1）有利条件：通信系统方面：本级人防指挥所网络通信、无线通信、有线通信、卫星通信、电信运营商通信等较为齐全，基本能够满足战时城市防空袭行动的需要。信息防护系统方面：本级人防指挥所信息防护手段较为完善，人防专网采用全网物理隔离的方式组网运行，信息防护能力基本能够保证信息通信网络的安全。空情预警信息系统基本能够满足战时接收空情信息的需要。（2）不利因素：全市各级指挥所配备不足，市本级仅有基本指挥所和机动指挥所，一旦基本指挥所遭空袭破坏，指挥人员将无处隐蔽，各县区人防指挥部也缺少相应的指挥所供自身隐蔽；市人防指挥部通信系统、信息防护系统建设薄弱，只能满足基本的需要，可靠性不足；各县区指挥部及重要目标单位指挥机构不能与市级人防指挥部联通，战时指挥通信保障较困难；电磁环境薄弱，无法对展示指挥通信产生积极影响。</p>"
);

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const toolbarConfig1 = {};

const mode = ref("default");
const mode1 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "情况判断结论-信息环境对我完成任务" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "基本情况")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "利弊分析")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "情况判断结论-信息环境对我完成任务",
      data: [
        {
          k: "基本情况",
          v: valueHtml.value,
        },
        {
          k: "利弊分析",
          v: valueHtml1.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;

  if (!editor) return;
  if (!editor1) return;

  editor.destroy();
  editor1.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="基本情况" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="利弊分析" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>